<template>
	<view class="">
		<cu-custom bgColor="bg-blue" :isBack="true" textRight="true" type="1">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>

		<view class="userbox bg-blue" v-if="postInfo">
			<view class="text-bold text-xl">
				
			</view>
			<view class="inro-card head-user text-black margin-top">
				<view class="flex  s-item-head   " :class="postInfo?'':'loading-box'">
					<view class="cu-avatar  round xl ">
						<!-- <text class="cuIcon-profile" v-if="postInfo"></text> -->
						<open-data type="userAvatarUrl"></open-data>
					</view>
					<view class="padding-lr  flex flex-direction  justify-around">

						<view class="text-cut text-bold text-xl">{{postInfo.name || ""}}</view>
						<view class="text-cut text-bold">

							<text v-if="postInfo.min_price">
								{{postInfo.min_price/1000+"k-"}}{{postInfo.max_price!=0?postInfo.max_price/1000+"k":""}}</text>
							<text v-if="postInfo.job"> {{" | "+postInfo.job || ""}}</text>
						</view>
						<view class="text-cut text-gray text-over">
							<text v-if="postInfo">{{countAge(postInfo.birthday)+" | "}}</text>
							<text v-if="postInfo.gender!=-1">{{sex[postInfo.gender]}}</text>
						</view>

					</view>
					<view class="padding-lr  flex flex-direction  justify-around" v-if="!postInfo">
						<open-data type="userNickName" class="text-cut text-bold text-xl"></open-data>
					</view>

				</view>


				<view class="basis-xll margin-top flex justify-between">
					<view class="" v-if="postInfo">
						简历完善度：<text class="text-blue">{{progress}}%</text>
					</view>
					<view class="text-gray" v-else>
						您还未创建简历哦
					</view>
					<view class="text-blue" @click="jumpTo('editResume','../resume/editResume')">
						<text class="cuIcon-edit"></text>编辑简历
					</view>
				</view>

			</view>

			<view class="inro-card margin-top" v-if="postInfo">
				<view class="basis-xll flex justify-between  slide-bottom-in">
					<view class="text-bold padding-tb text-black">我的投递</view>
					<view class="text-gray  padding-tb"
						@click="jumpTo('jump','/app/Offer/pages/resume/postList?type=all')">
						查看全部 <text class="cuIcon-right"></text>
					</view>
				</view>

				<view class="basis-xll  grid col-4 padding-sm-tb">
					<view class="" v-for="(item,index) in postStatus" @click="jumpTo('jump','/app/Offer/pages/resume/postList?type=all&status='+item.status)">
						<view class="text-gray flex justify-around">
							<!-- <text class="cuIcon-title text-red"></text> -->
							<view class="basis-xl text-center ">{{item.name}}</view>
							<text class="cuIcon-right"></text>
						</view>

						<view class=" flex justify-start  ">

							<view class="basis-xl text-center padding-sm-tb text-bold text-xl text-black">{{item.num}}
							</view>

						</view>

					</view>
				</view>

			</view>

			<view class="inro-card margin-top flex justify-between text-black"
				@click="jumpTo('jump','/app/Offer/pages/resume/postList?type=collection')">
				<view class="basis-xl">

					<text class="cuIcon-favor text-grey"></text>
					<text class="padding-lr">职位收藏</text>

				</view>
				<view class="basis-xs flex justify-end">
					<text class="cuIcon-right"></text>
				</view>
			</view>

			<view class="inro-card margin-top flex justify-between text-black"
				@click="jumpTo('jump','/app/Offer/pages/resume/postList?type=history')">
				<view class="basis-xl">

					<text class="cuIcon-attentionfill text-grey"></text>
					<text class="padding-lr">浏览历史</text>

				</view>
				<view class="basis-xs flex justify-end">
					<text class="cuIcon-right"></text>
				</view>
			</view>

		</view>
		
		
		<view class="" v-else>
			<view class="boxes middle flex flex-direction">
				<view class="  no-status">
					
				</view>
				
				<view class="tips margin-sm text-gray">
					您还没有创建简历 现在去编写吧~
				</view>
				<button class="cu-btn round shadow lg bg-blue margin-sm" @click="jumpTo('editResume','../resume/editResume')">创建简历</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "Myself",
		data() {
			return {
				title: "我的",
				postInfo: null,
				sex: ['男', '女'],
				progress: 0,
				postStatus: [{
						name: "已邀约",
						status: 0,
						num: 0
					},
					{
						name: "被查看",
						status: 1,
						num: 0
					},
					{
						name: "已投递",
						status: 2,
						num: 0
					},
					{
						name: "不合适",
						status: 3,
						num: 0
					}

				]

			}
		},

		onShow() {
			this.getReseume();
		},

		mounted() {
			this.getReseume();
		},

		methods: {

			/**
			 * 预览简历
			 */
			previewResume() {
				


			},
			checkStatus(type) {

			},
			/**
			 * 获取
			 */
			getPostList() {
				this.apiRequest('/buyer/OfferOrderList', {}, "get", 0).then(res => {
					if (res.code == 200) {

					} else{
						 this.error();
					}
				})
				this.apiRequest('/buyer/OfferOrderListCount', {

				}, "get", 0).then(res => {
					if (res.code == 200) {
						for (let i in res.data) {
							this.postStatus[i].num = res.data[i];
						}
					} else this.error();
				}).catch(() => {
					this.error();
				})
			},
			/**
			 * @param {Object} age 计算年龄
			 */
			countAge(str) {
				str = (str.split(" "))[0];
				var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
				if (r == null) return false;
				var d = new Date(r[1], r[3] - 1, r[4]);
				if (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]) {
					var Y = new Date().getFullYear();
					return ((Y - r[1]) + "  岁 ");
				}

			},
			/**
			 * 获取我的简历
			 */
			getReseume() {

				this.apiRequest('/buyer/OfferResume', {

				}, "get", 0).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.postInfo = res.data.resume;
						this.staticResume();
						this.getPostList();

					} else {
						this.error();
					}


				})



			},
			error() {
				uni.showModal({
					title: "温馨提示",
					content: "请求出错啦",
					showCancel: false,
					success: (e) => {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			/**
			 * 统计简历完善度
			 */
			staticResume() {
				let num = 0;
				let arr = ["study", "work"];
				let object = ["birthday", "gender"];
				for (let i in arr) {
					if (typeof this.postInfo[arr[i]] != "undefined") {
						console.log(this.postInfo[arr[i]].length);
						if (this.postInfo[arr[i]].length > 0) {
							num++;
						}

					}
				};
				for (let i in object) {
					if (typeof this.postInfo[object[i]] != "undefined") {

						num++;
					}
				};
				console.log("num " + num)
				let progress = (num / (arr.length + object.length)) * 100;
				let timer = setInterval(() => {
					if (this.progress >= progress) {
						clearInterval(timer);
						return false;
					}
					this.progress += 1;
				});






			},

			jumpTo(...dat) {
				switch (dat[0]) {
					case "editResume":
						let url = "/app/Offer/pages/resume/editResume"
						if (!this.postInfo) {
							url = "/app/Offer/pages/resume/editBasic";
						}
						uni.navigateTo({
							url: url
						})
						break;

					case "jump":
						uni.navigateTo({
							url: dat[1]
						})
						break;

				}
			}

		}

	}
</script>

<style scoped>
	:root {
		--loading-grey: #ededed;
	}

	.loading-box .school-title,
	.loading-box .school-tag {
		min-height: 40rpx;
		max-width: 94%;
		margin-top: 8rpx;
		border-radius: 15rpx;
	}

	.loading-box swiper,
	.loading-box image,
	.loading-box .school-title,
	.loading-box .cu-avatar,
	.loading-box .text-cut {

		background-color: var(--loading-grey);
		background: linear-gradient(100deg,
				rgba(255, 255, 255, 0) 40%,
				rgba(255, 255, 255, 0.5) 50%,
				rgba(255, 255, 255, 0) 60%)var(--loading-grey);
		background-size: 200% 100%;
		background-position-x: 120%;
		animation: 1s loading ease-in-out infinite;
	}

	@-ms-keyframes loading {
		to {
			background-position-x: -20%;
		}
	}

	@keyframes loading {
		to {
			background-position-x: -20%;
		}
	}

	@-webkit-keyframes loading {
		to {
			background-position-x: -20%;
		}
	}

	.inro-card {
		width: 92%;
		margin: 20rpx auto 20rpx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		padding: 30upx;
		position: relative;
	}

	.cu-avatar {
		border-radius: 20rpx;
	}

	.userbox {
		width: 100vw;
		height: 200upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 1;

	}

	.padding-sm-tb {
		padding-top: 15rpx;
	}
</style>
